<template>
	<view class="holdon" @click="closeBtn">
		<image :class="{ball:true, changeOpacity: longTime}" 
			:style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"	 
			@touchstart="drag_start" @touchend="drag_end" @touchmove.prevent="drag_hmove" @click.stop="addOn" 
			src="../../static/image/add.png" mode="aspectFit">
		</image>
		<view :class="{addBtn:true, btnLeft:leftShow && addShow, btnRight:rightShow && addShow}" :style="'top:'+(moveY == 0 & y>0? y+'%':btnY+'px')">
			<view class="addBooks" @click="addBooks">账</view>
			<view class="addThings" @click="addThings">事</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			x: {
				type: Number,
				default:82
			},
			y: {
				type: Number,
				default:80
			},
		},
		data() {
			return {
				start:[0,0],
				moveY:0,
				moveX:0,
				btnY:0,
				btnX:0,
				windowWidth:'',
				windowHeight:'',
				leftShow: false,
				rightShow: true,
				addShow: false,
				longTime: true,
			}
		},
		mounted() {
			getApp().watch(this.getcartcount,'addBookBtn')
			this.addShow = getApp().globalData.addBookBtn
			const { windowWidth, windowHeight } = uni.getSystemInfoSync()
			this.windowWidth = windowWidth - 35
			this.windowHeight = windowHeight - 100
			this.btnX = this.windowWidth - 180
			this.btnY = this.windowHeight - 65
		},
		methods: {
			addBooks(){
				uni.navigateTo({
					url: '../AddBooks/addBooks'
				});
			},
			addThings(){
				uni.navigateTo({
					url: '../AddThings/addThings'
				});
			},
			getcartcount(val){
				this.addShow = val
			},
			closeBtn(){
				this.addShow = false
				getApp().globalData.addBookBtn = this.addShow
			},
			addOn(){
				this.longTime = false
				this.addShow = !this.addShow
				getApp().globalData.addBookBtn = this.addShow
				if(!this.addShow){
					let timer4 = setTimeout(() => {
						if(!this.longTime){
							this.longTime = true
						}
						clearTimeout(timer4)
					},3000)
				}
			},
			drag_start(event){
				this.longTime = false
				this.start[0] = event.touches[0].clientX-event.target.offsetLeft
				this.start[1] = event.touches[0].clientY-event.target.offsetTop
			},
			drag_hmove(event){
				this.longTime = false
				this.addShow = false
				getApp().globalData.addBookBtn = this.addShow
				let oldx = 0
				let oldy = 0
				let	tag = event.touches;
				if(tag[0].clientX < 25 ){
					tag[0].clientX = 25
				}
				if(tag[0].clientY < 110 ){
					tag[0].clientY = 110
				}
				if(tag[0].clientX > this.windowWidth){
					tag[0].clientX = this.windowWidth
				}
				if(tag[0].clientY > this.windowHeight){
					tag[0].clientY = this.windowHeight
				}
				let timer1 = setTimeout(() => {
					this.moveX = tag[0].clientX-this.start[0]
					this.moveY = tag[0].clientY-this.start[1]
					this.btnY = this.moveY
					oldx = this.moveX
					oldy = this.moveY
					clearTimeout(timer1)
				},50)
			},
			drag_end(){
				let timer2 = setTimeout(() => {
						this.comeBorder()
					clearTimeout(timer2)
				},50)
			},
			comeBorder(){
				if((this.moveX > 5 && this.moveX <= (this.windowWidth/2)) || this.moveX < 0 ){
					this.moveX = 5
					this.btnX = 70
					this.leftShow = true
					this.rightShow = false
				}else if(this.moveX > (this.windowWidth/2) && this.moveX < (this.windowWidth)){
					this.moveX = this.windowWidth - 30
					this.btnX = this.windowWidth - 185
					this.leftShow = false
					this.rightShow = true
				}else{
					this.btnX = this.moveX + 70
				}
				
				let timer3 = setTimeout(() => {
					if(!this.addShow){
						this.longTime = true
					}
					clearTimeout(timer3)
				},3000)
			}
		}}
</script>
 
<style>
	.holdon{
		width: 100%;
		height: 100%;
	}
	.ball{
		width: 120rpx;
		height: 120rpx;
		box-sizing: border-box;
		padding: 20rpx;
		opacity: 1;
		background:linear-gradient(to bottom, #afdef8,#7e9db1);
		border-radius: 50%;
		box-shadow: 0 0 15rpx #87CEFA;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed !important;
		z-index: 999999999;
		transition: opacity 0.65s ease-out;
	}
	
	.addBtn{
		width: 0rpx;
		height: 110rpx;
		opacity: 0;
		position: absolute !important;
		z-index: 999999998;
		transition: width 0.2s, left 0.2s, right 0.2s;
		display: flex;
	}
	
	.btnRight{
		position: absolute !important;
		right: 135rpx;
		width: 230rpx;
		opacity: 1;
		display: flex;
		flex-direction: row;
	}
	
	.btnLeft{
		position: absolute !important;
		left: 135rpx;
		width: 230rpx;
		opacity: 1;
		display: flex;
		flex-direction: row-reverse;
	}
	
	.changeOpacity{
		opacity: 0.6;
	}
	
	.addBtn > view{
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx 6rpx 0 6rpx;
		border-radius: 100%;
		text-align: center;
		line-height: 98rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: rgba(224, 224, 224, 1.0);
	}
	
	.addBtn .addBooks{
		background: linear-gradient(145deg, #36c6d1, #2da7b0);
		box-shadow:  -2px -2px 6px  #42f3ff,
		             2px 2px 6px #42f3ff;
	}
	
	.addBtn .addThings{
		background: linear-gradient(145deg, #e29e40, #be8536);
		box-shadow:  -2px -2px 6px  #ffb049,
		             2px 2px 6px #ffb049;
	}
</style>